<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
    <title>登录</title>
    <!-- include common vendor stylesheets & fontawesome -->
    <link rel="stylesheet" type="text/css" href="css/login/bootstrap.min.css" data-rtl="./dist/css/rtl/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/login/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/login/regular.min.css">
    <link rel="stylesheet" type="text/css" href="css/login/brands.min.css">
    <!-- ace.css -->
    <link rel="stylesheet" type="text/css" href="css/login/ace.min.css">

    <style>
        .header{
            height: 50px;
            position: fixed;
            top: 10px;
            left: 10px;
            right: 0;
        }
        .body-container {
            background-image: linear-gradient(#6baace, #264783);
            background-attachment: fixed;
            background-repeat: no-repeat;
        }

        .carousel-item>div {
            height: 100%;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
        }

        /* these rules are used to make sure in mobile devices, tab panes are not all the same height (for example 'forgot' pane is not as tall as 'signup' pane) */

        @media (max-width: 1199.98px) {
            .tab-sliding .tab-pane:not(.active) {
                max-height: 0 !important;
            }

            .tab-sliding .tab-pane.active {
                min-height: 80vh;
                max-height: none !important;
            }
        }
        .login_panel{
            width: 400px;
            height: 400px;
            background: #fff;
            position: fixed;
            left: 50%;
            top: 50%;
            transform:translate(-50%,-60%);
            border-radius: 6px;
            padding: 30px;
            box-sizing: border-box;
            overflow: hidden;
        }
        .login_row{
            width: 100%;
            padding: 0 10px;
            box-sizing: border-box;
        }

    </style>
    <style>.flex-equal-sm > * {flex: 0 1 1% !important;}						 @media print {#id-ace-settings-modal {display: none !important;}}						 @media (hover: hover) { #id-ace-settings-modal:not(.show) .aside-header > .btn:hover > .fa { animation: 0.6s fa-spin ease-in-out; }}						 @media screen and (prefers-reduced-motion: reduce) { #id-ace-settings-modal:not(.show) .aside-header > .btn:hover > .fa { animation: none; } }</style></head>

<body class="is-document-loaded">
<div class="header"><img src="img/logo_light.png" height="50"/></div>
<div class="body-container">
    <div class="login_panel">
        <!-- show this in desktop -->
        <div style="width: 100%;padding-bottom: 20px;">
            <h4 class="text-dark-tp4 border-b-1 brc-secondary-l2 text-130" style="padding-bottom:15px;">
                登录
            </h4>
        </div>

        <form id="login_form" class="form-row">
            <div class="form-group login_row">
                <div class="d-flex align-items-center input-floating-label text-blue brc-blue-m2">
                    <input placeholder="用户名" type="text" class="form-control form-control-lg pr-4 shadow-none" name="username">
                    <i class="fa fa-user text-grey-m2 ml-n4"></i>
                    <label class="floating-label text-grey-l1 ml-n3" for="id-login-username">
                        用户名
                    </label>
                </div>
            </div>


            <div class="form-group login_row">
                <div class="d-flex align-items-center input-floating-label text-blue brc-blue-m2">
                    <input placeholder="密码" type="password" class="form-control form-control-lg pr-4 shadow-none" name="password">
                    <i class="fa fa-key text-grey-m2 ml-n4"></i>
                    <label class="floating-label text-grey-l1 ml-n3" for="id-login-password">
                        密码
                    </label>
                </div>
            </div>

            <div class="form-group login_row">
                <div class="d-flex align-items-center input-floating-label text-blue brc-blue-m2">
                    <input id="captcha" placeholder="验证码" type="text" class="form-control form-control-lg pr-4 shadow-none" name="captcha"/>
                    <img id="validateImg" class="validateImg ml-n4" src="" width="80" height="30" onclick="getCaptcha()" style="position: absolute;right: 8px;" />
                    <label class="floating-label text-grey-l1 ml-n3" for="id-login-captcha">
                        验证码
                    </label>
                </div>
            </div>

            <div id="error_tips" class="form-group login_row" style="height:18px;line-height:18px;font-size: 14px;color:#df4b30;"></div>

            <div class="form-group login_row">
                <button type="button" class="btn btn-primary btn-block" style="line-height: 30px;" onclick="onLoginClick()">
                    登录
                </button>
            </div>
    </div>
    </form>
</div>

<!-- include common vendor scripts used in demo pages -->
<script src="js/jquery.min.js"></script>

<!-- "Login" page script to enable its demo functionality -->
<script>
    $(function () {
        getCaptcha();
        $("#captcha").keydown(function (e){
            if(e.keyCode == 13) onLoginClick();
        });
    });

    function getCaptcha(){
        document.getElementById('validateImg').src = 'randCheckCode?nocache='+new Date().getTime();
    }

    var isLoading = false;
    function onLoginClick() {
        if(isLoading){
            console.log('isLoading');
            return;
        }
        var errorTips = $("#error_tips");
        var params = {};
        var form = $('#login_form').serializeArray();
        $.each(form, function() {
            params[this.name] = this.value;
        });
        console.log(params);
        if(!params.username){
            errorTips.html("请输入用户名");
            return;
        }
        if(!params.password){
            errorTips.html("请输入密码");
            return;
        }
        if(!params.captcha){
            errorTips.html("请输入验证码");
            return;
        }
        isLoading = true;
        $.ajax({
            url : "login",
            type : "post",
            data : params,
            cache : false,
            dataType : "json",
            success : function(resultBean) {
                isLoading = false;
                if(resultBean.res){
                    window.location.href = 'home';
                }else{
                    errorTips.html(resultBean.msg);
                    getCaptcha();
                }
            },
            error : function(jqXHR, textStatus, errorThrown) {
                isLoading = false;
                console.log('network error.');
            }
        });
    }
</script>

</body>
</html>
